Skip to main content

🎯 Selection & Multi-Select

Element selection is fundamental to working efficiently in AppStruct. This guide covers how to select individual elements and use multi-select mode for bulk operations, especially optimized for both desktop and mobile interfaces.

Overview​

AppStruct provides powerful selection tools that allow you to:

  1. Single Element Selection - Click to select individual elements
  2. Multi-Select Mode - Select multiple elements for bulk operations
  3. Mobile Multi-Select - Touch-optimized multi-selection for mobile devices
  4. Keyboard Shortcuts - Use keyboard modifiers for efficient selection

1. Single Element Selection​

Desktop Selection

  • Click: Click on any element to select it
  • Visual Feedback: Selected elements display a blue border with resize handles
  • Deselection: Click on empty canvas area or another element to deselect

Mobile Selection

  • Tap: Tap on any element to select it
  • Visual Feedback: Selected elements show enhanced borders and corner handles
  • Mobile FAB: A floating action button appears for quick element editing

2. Multi-Select Mode​

Desktop Multi-Select

  • Shift+Click: Hold Shift and click multiple elements to add them to selection
  • Ctrl+Click (Windows) / Cmd+Click (Mac): Add or remove elements from selection
  • Selection Indicator: Multi-selected elements show distinct styling

Mobile Multi-Select

  • Multi-Select Toggle: Use the multi-select FAB button when an element is selected
  • Tap to Add: In multi-select mode, tap elements to add/remove from selection
  • Visual Indicators: Selected elements show numbered indicators (1, 2, 3...)
  • Selection Counter: Header shows total number of selected elements
  • Haptic Feedback: Device vibration confirms selections

Multi-Select Operations

  • Group Elements: Create groups from multiple selected elements
  • Bulk Delete: Delete all selected elements at once
  • Bulk Copy: Copy multiple elements simultaneously
  • Move Together: Drag multiple elements as a unit

3. Selection Behavior​

Element Hierarchy

  • Nested Elements: Clicking nested elements selects the immediate child, not the parent
  • Group Selection: Clicking grouped elements selects the entire group
  • Body Selection: Click empty areas to select the page body (background)

Smart Selection

  • Touch Target: Mobile interface provides larger touch targets for easier selection
  • Overlap Handling: When elements overlap, the topmost element is selected
  • Z-Index Awareness: Selection respects element layering

4. Selection Indicators​

Visual Feedback

  • Border Highlight: Selected elements show blue (#3378FF) borders
  • Resize Handles: Corner and edge handles appear for resizing
  • Multi-Select Numbers: Numbered badges show selection order
  • Selection Count: Mobile header displays "X Elements Selected"

Mobile Enhancements

  • Enhanced Borders: Thicker borders (3px) for better visibility
  • Larger Handles: Touch-friendly resize handles (24px)
  • FAB Integration: Floating action buttons for quick actions

5. Multi-Select Context Menu​

Available Actions

  • Group: Combine selected elements into a single group
  • Delete: Remove all selected elements
  • Copy: Copy selection for pasting elsewhere
  • Duplicate: Create copies of all selected elements
  • Layer Control: Move all elements forward/backward together

Mobile Multi-Select Panel

  • Action Buttons: Large, touch-friendly action buttons
  • Selection Summary: Visual indicators showing selected elements
  • Bulk Operations: Optimized for mobile interaction patterns

6. Keyboard Shortcuts​

Selection Shortcuts

  • Ctrl+A / Cmd+A: Select all elements on current page
  • Escape: Clear all selections
  • Shift+Click: Add to selection
  • Ctrl+Click / Cmd+Click: Toggle element in selection

After Selection

  • Delete: Remove selected elements
  • Ctrl+C / Cmd+C: Copy selected elements
  • Ctrl+V / Cmd+V: Paste copied elements
  • Ctrl+D / Cmd+D: Duplicate selected elements

7. Mobile-Specific Features​

Touch Interactions

  • Long Press: Alternative selection method on mobile
  • Vibration Feedback: Confirms selection actions
  • Multi-Select FAB: Quick access to multi-select mode
  • Swipe Gestures: Enhanced navigation while selecting

Performance Optimization

  • Optimized Rendering: Smooth selection on mobile devices
  • Battery Efficient: Minimal impact on device performance
  • Touch Responsiveness: Sub-100ms selection response time

Best Practices​

  • Mobile First: Always test selection behavior on mobile devices
  • Bulk Operations: Use multi-select for efficiency when working with many elements
  • Visual Hierarchy: Understand parent-child relationships before selecting
  • Keyboard Efficiency: Learn keyboard shortcuts for faster desktop workflow
  • Touch Targets: Ensure elements are large enough for easy mobile selection

Troubleshooting​

Common Issues

  • Can't Select Element: Element might be locked or part of a group
  • Multi-Select Not Working: Ensure you're in multi-select mode on mobile
  • Selection Lag: Check if too many elements are selected simultaneously
  • Wrong Element Selected: Check element hierarchy and z-index ordering

Need Assistance?​

If you encounter any challenges with element selection, please refer to the Documentation or contact our support team at [email protected].

Happy Building with AppStruct!